<template>
  <div class="shop-list">
    <div class="goods" v-for="item in 10" :key="item">
      <van-card
        price="2.00"
        title="切果NOW! 水果切法"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        @click="handleToDetail"
      >
      <template #desc>
        <div class="desc">
          <b class="start">4.7分</b>
          <span class="sales">月销1000</span>
          <span class="time">30分钟</span>
          <span class="meters">500m</span>
        </div>
        <div class="tags">起送 ¥2.00，配送费¥ 1.50</div>
        
      </template>
      
        <template #tags>
          <van-tag plain type="primary">蓝骑士专送</van-tag>
        </template>
      </van-card>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { IShop } from "@/types";
import { useRouter } from "vue-router";

const router = useRouter();
const shopList = ref([] as IShop[]);
const loading = ref(false);
const finished = ref(false);
const data = ref([]);

const onLoad = () => {
  loading.value = true;
  // 模拟请求数据
  setTimeout(() => {
    loading.value = false;
    finished.value = true;
    data.value = shopList.value.slice(0, 10);
  }, 1000);
};

const handleToDetail = () => {
  router.push({ name: "shop", params: { id: 1 } });
};
 
</script>
<style scoped lang="scss">
.shop-list {
  padding: 8px 10px;
  margin-bottom: 50px;
  .desc{
    .start{
      color: coral;
    }
    .sales{
      color: #666;
      margin-left: 5px;
    }
    .time{
      color: #666;
      margin-left: 20px;
    }
    .meters{
      color: #666;
      margin-left: 5px;
    }
   
  }
  .tags{
      color: #666;
    }
    
}
.van-card{
      background-color: #fff;
      margin-bottom: 10px;
      border-radius: 6px;
    }
</style>
